<template>
  <view class="cart-container">
    <!-- 修改了购物车被遮挡的编辑功能被遮挡的问题 -->
    <!-- 顶部导航栏 -->
    <view class="nav-bar">
      <view class="nav-left">
        <view class="nav-back" @tap="navigateBack">
         
        </view>
      </view>
   
      <view class="nav-right" v-if="!isLoading && cartItems.length > 0">
        <view class="nav-edit" @tap="toggleEdit">
          {{ isEdit ? "完成" : "编辑" }}
        </view>
      </view>
      <view class="empty-placeholder" v-else></view>
    </view>
    
    <!-- 加载中提示 -->
    <view class="loading-container" v-if="isLoading">
      <view class="loading-spinner"></view>
      <view class="loading-text">加载中...</view>
    </view>

    <!-- 空购物车提示 -->
    <view class="empty-cart" v-if="!isLoading && cartItems.length === 0">
      <image class="empty-icon" src="/static/icons/empty-cart.png"></image>
      <view class="empty-text">购物车空空如也，快去选购禅意好物吧</view>
      <view class="go-shopping-btn" @tap="navigateToShop">去选购</view>
    </view>

    <!-- 购物车列表 -->
    <scroll-view class="cart-list" scroll-y v-if="!isLoading && cartItems.length > 0">
      <!-- 店铺信息 -->
      <view class="shop-info">
        <view class="shop-select" @tap="toggleSelectShop">
          <view class="select-icon" :class="{ selected: isAllSelected }"></view>
          <text class="shop-name">天禅境官方店</text>
        </view>
      </view>

      <!-- 商品列表 -->
      <view class="cart-items">
        <view class="cart-item" v-for="(item, index) in cartItems" :key="index">
          <view class="item-select" @tap="toggleSelectItem(index)">
            <view class="select-icon" :class="{ selected: item.selected }"></view>
          </view>
          <image class="item-image" :src="item.product_image" mode="aspectFill"></image>
          <view class="item-info">
            <view class="item-name">{{ item.product_name }}</view>
            <view class="item-spec">{{ item.product_sku?.product_attr }}</view>
            <view class="item-price-row">
              <view class="item-price">¥{{ item.product_price }}</view>
              <view class="item-quantity">
                <view class="quantity-btn quantity-minus" @tap="decreaseQuantity(index)">-</view>
                <input class="quantity-input" type="number" :value="item.total_num"
                  @input="updateQuantity($event, index)" />
                <view class="quantity-btn quantity-plus" @tap="increaseQuantity(index)">+</view>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 优惠信息区域 -->
      <!-- <view class="discount-section">
        <view class="discount-title">优惠信息</view>
        
        <view class="discount-item" @tap="showCouponList">
          <view class="discount-label">优惠券</view>
          <view class="discount-value" :class="{ 'discount-active': activeCoupon }">
            <text>{{activeCoupon ? `${activeCoupon.name}（-¥${activeCoupon.value}）` : '暂无可用'}}</text>
            <image class="arrow-icon" src="/static/icons/arrow-right.png"></image>
          </view>
        </view>
        
        <view class="discount-item">
          <view class="discount-label">积分抵扣</view>
          <view class="discount-value">
            <text class="points-available">{{userPoints}}积分可用</text>
            <switch 
              class="points-switch" 
              color="#78A77F" 
              :checked="usePoints" 
              @change="toggleUsePoints"
            />
          </view>
        </view>
        
        <view class="points-info" v-if="usePoints && pointsDiscount > 0">
          <view class="points-info-text">
            根据阶梯抵扣规则，您当前可抵扣商品金额的{{pointsDiscountPercent}}%
          </view>
          <view class="points-detail" @tap="showPointsRules">查看详情</view>
        </view>
      </view> -->

      <!-- 订单金额信息 -->
      <view class="order-summary">
        <view class="summary-item">
          <text class="summary-label">商品金额</text>
          <text class="summary-value">¥{{ totalPrice.toFixed(2) }}</text>
        </view>
        <!-- <view class="summary-item" v-if="activeCoupon">
          <text class="summary-label">优惠券</text>
          <text class="summary-value">-¥{{activeCoupon.value.toFixed(2)}}</text>
        </view>
        <view class="summary-item" v-if="usePoints && pointsDiscount > 0">
          <text class="summary-label">积分抵扣</text>
          <text class="summary-value">-¥{{pointsDiscount.toFixed(2)}}</text>
        </view> -->
        <view class="summary-item">
          <text class="summary-label">运费</text>
          <text class="summary-value">¥{{ shipping.toFixed(2) }}</text>
        </view>
        <view class="summary-divider"></view>
        <view class="summary-total">
          <text class="total-label">合计</text>
          <text class="total-value">¥{{ finalPrice.toFixed(2) }}</text>
        </view>
      </view>
    </scroll-view>

    <!-- 底部结算栏 -->
    <view class="bottom-bar" v-if="cartItems.length > 0">
      <view class="select-all" @tap="toggleSelectAll">
        <view class="select-icon" :class="{ selected: isAllSelected }"></view>
        <text class="select-text">全选</text>
      </view>
      <view class="cart-total" v-if="!isEdit">
        <view class="total-price">
          <text>合计: </text>
          <text class="price-value">￥{{ Number(finalPrice).toFixed(2) }}</text>
        </view>
        <view class="total-saved" v-if="totalDiscount > 0">
          已优惠: ￥{{ Number(totalDiscount).toFixed(2) }}
        </view>
      </view>
      <view class="checkout-btn" v-if="!isEdit" @tap="checkout">
        <text>结算({{ selectedCount }})</text>
      </view>
      <view class="delete-btn" v-if="isEdit" @tap="deleteSelected()">
        <text>删除</text>
      </view>
    </view>

    <!-- 优惠券选择弹窗 -->
    <view class="coupon-modal" v-if="showCoupons">
      <view class="coupon-mask" @tap="hideCouponList"></view>
      <view class="coupon-container">
        <view class="coupon-header">
          <text class="coupon-title">选择优惠券</text>
          <view class="coupon-close" @tap="hideCouponList">×</view>
        </view>
        <scroll-view class="coupon-list" scroll-y>
          <view class="coupon-item" v-for="(coupon, index) in availableCoupons" :key="index"
            :class="{ 'coupon-selected': activeCouponIndex === index }" @tap="selectCoupon(index)">
            <view class="coupon-left">
              <view class="coupon-value">¥{{ coupon.value }}</view>
              <view class="coupon-condition">满{{ coupon.minPrice }}元可用</view>
            </view>
            <view class="coupon-right">
              <view class="coupon-name">{{ coupon.name }}</view>
              <view class="coupon-time">{{ coupon.validTime }}</view>
              <view class="coupon-scope">{{ coupon.scope }}</view>
            </view>
            <view class="coupon-select-icon" v-if="activeCouponIndex === index">
              <image src="/static/icons/selected.png"></image>
            </view>
          </view>
          <view class="no-coupon" v-if="availableCoupons.length === 0">
            <text>暂无可用优惠券</text>
          </view>
        </scroll-view>
        <view class="coupon-footer">
          <view class="coupon-btn coupon-cancel" @tap="hideCouponList">取消</view>
          <view class="coupon-btn coupon-confirm" @tap="confirmCoupon">确定</view>
        </view>
      </view>
    </view>

    <!-- 积分规则弹窗 -->
    <view class="points-modal" v-if="showPointsModal">
      <view class="points-modal-content">
        <view class="points-modal-header">
          <text class="points-modal-title">积分抵扣规则</text>
          <view class="points-modal-close" @tap="hidePointsRules">×</view>
        </view>
        <view class="points-modal-body">
          <view class="points-rule-item">
            <text class="points-rule-title">阶梯式抵扣规则</text>
            <view class="points-rule-desc">
              <text>• 积分达到500可抵扣商品金额的5%</text>
              <text>• 积分达到1000可抵扣商品金额的8%</text>
              <text>• 积分达到2000可抵扣商品金额的12%</text>
              <text>• 积分达到5000可抵扣商品金额的15%</text>
            </view>
          </view>
          <view class="points-rule-item">
            <text class="points-rule-title">使用说明</text>
            <view class="points-rule-desc">
              <text>• 每100积分等值1元人民币</text>
              <text>• 单笔订单最高可抵扣订单金额的50%</text>
              <text>• 部分特价商品不参与积分抵扣</text>
            </view>
          </view>
        </view>
        <view class="points-modal-footer">
          <button class="points-modal-btn" @tap="hidePointsRules">
            我知道了
          </button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { cartListApi, delCartApi, editCartApi } from "../../api/order";

export default {
  data() {
    return {
      isLoading: true, // 添加加载状态
      isEdit: false,
      isAllSelected: true,
      selectedCount: 0,
      showCoupons: false,
      showPointsModal: false,
      usePoints: true,
      userPoints: 0,
      activeCouponIndex: 0,
      activeCoupon: null,
      shipping: 0, // 运费

      // 购物车商品列表
      cartItems: [],

      // 可用优惠券列表
      availableCoupons: [],
    };
  },
  computed: {
    // 商品总价
    totalPrice() {
      return this.cartItems.reduce((total, item) => {
        if (item.selected) {
          return total + item.product_price * item.total_num;
        }
        return total;
      }, 0);
    },

    // 积分折扣百分比
    pointsDiscountPercent() {
      const points = this.userPoints;

      if (points >= 5000) return 15;
      if (points >= 2000) return 12;
      if (points >= 1000) return 8;
      if (points >= 500) return 5;
      return 0;
    },

    // 积分抵扣金额
    pointsDiscount() {
      if (!this.usePoints) return 0;

      const discountPercentage = this.pointsDiscountPercent / 100;
      const pointsValue = this.userPoints / 100; // 每100积分等值1元

      // 计算最大可抵扣金额（不超过订单总价的50%）
      const maxDiscount = this.totalPrice * 0.5;
      const calculatedDiscount = this.totalPrice * discountPercentage;

      return Math.min(calculatedDiscount, pointsValue, maxDiscount);
    },

    // 优惠券折扣
    couponDiscount() {
      return this.activeCoupon ? this.activeCoupon.value : 0;
    },

    // 总优惠金额
    totalDiscount() {
      return this.pointsDiscount + this.couponDiscount;
    },

    // 最终支付金额
    finalPrice() {
      let price = this.totalPrice - this.totalDiscount + this.shipping;
      return price > 0 ? price : 0;
    },
  },
  created() {
    // 获取购物车列表
    this.loadCartData();

    // 初始化默认优惠券
    this.activeCoupon = this.availableCoupons[0];
  },
  methods: {
    // 加载购物车数据
    loadCartData() {
      this.isLoading = true;
      cartListApi().then((res) => {
        this.cartItems = res.productList[0]?.productList || [];
        this.checkSelectStatus();
        this.isLoading = false;
      }).catch(err => {
        console.error('获取购物车数据失败:', err);
        this.isLoading = false;
      });
    },

    // 返回上一页
    navigateBack() {
      uni.navigateBack();
    },

    // 跳转到商城页面
    navigateToShop() {
      uni.switchTab({
        url: "/pages/shop/shop",
      });
    },

    // 切换编辑模式
    toggleEdit() {
      this.isEdit = !this.isEdit;
    },

    // 选择/取消选择单个商品
    toggleSelectItem(index) {
      this.cartItems[index].selected = !this.cartItems[index].selected;
      this.checkSelectStatus();
    },

    // 选择/取消选择所有商品
    toggleSelectAll() {
      this.isAllSelected = !this.isAllSelected;

      this.cartItems.forEach((item) => {
        item.selected = this.isAllSelected;
      });

      this.checkSelectStatus();
    },

    // 选择/取消选择店铺所有商品
    toggleSelectShop() {
      this.isAllSelected = !this.isAllSelected;

      this.cartItems.forEach((item) => {
        item.selected = this.isAllSelected;
      });

      this.checkSelectStatus();
    },

    // 检查商品选择状态
    checkSelectStatus() {
      this.isAllSelected =
        this.cartItems.length > 0 &&
        this.cartItems.every((item) => item.selected);

      this.selectedCount = this.cartItems.reduce((count, item) => {
        return item.selected ? count + item.total_num : count;
      }, 0);
    },

    // 减少商品数量
    decreaseQuantity(index) {
      if (this.cartItems[index].total_num > 1) {
        this.cartItems[index].total_num--;
        editCartApi({
          cart_id: this.cartItems[index].cart_id,
          num: this.cartItems[index].total_num,
        });
      } else {
        // 弹窗询问是否删除
        uni.showModal({
          title: "提示",
          content: "确定要删除该商品吗？",
          success: (res) => {
            if (res.confirm) {
              this.cartItems.splice(index, 1);
              this.checkSelectStatus();
              editCartApi({
                cart_id: this.cartItems[index].cart_id,
                num: 0,
              });
            }
          },
        });
      }
    },

    // 增加商品数量
    increaseQuantity(index) {
      this.cartItems[index].total_num++;
      editCartApi({
        cart_id: this.cartItems[index].cart_id,
        num: this.cartItems[index].total_num,
      });
    },

    // 直接修改商品数量
    updateQuantity(event, index) {
      const value = parseInt(event.detail.value);
      if (value > 0) {
        this.cartItems[index].total_num = value;
      } else {
        this.cartItems[index].total_num = 1;
      }
      editCartApi({
        cart_id: this.cartItems[index].cart_id,
        num: this.cartItems[index].total_num,
      });
    },

    // 删除选中的商品
    deleteSelected() {
      uni.showModal({
        title: "提示",
        content: "确定要删除选中的商品吗？",
        success: (res) => {
          if (res.confirm) {
            //要删除的cart_id
            let del_ids = [];
            this.cartItems.forEach((item) => {
              if (item.selected) {
                del_ids.push(item.cart_id);
              }
            });
            delCartApi({
              cart_id: del_ids.join(","),
            });
            this.cartItems = this.cartItems.filter((item) => !item.selected);
            this.checkSelectStatus();
          }
        },
      });
    },

    // 显示优惠券列表
    showCouponList() {
      this.showCoupons = true;
    },

    // 隐藏优惠券列表
    hideCouponList() {
      this.showCoupons = false;
    },

    // 选择优惠券
    selectCoupon(index) {
      this.activeCouponIndex = index;
    },

    // 确认选择优惠券
    confirmCoupon() {
      if (this.availableCoupons.length > 0) {
        this.activeCoupon = this.availableCoupons[this.activeCouponIndex];
      }
      this.hideCouponList();
    },

    // 切换是否使用积分
    toggleUsePoints(e) {
      this.usePoints = e.detail.value;
    },

    // 显示积分规则
    showPointsRules() {
      this.showPointsModal = true;
    },

    // 隐藏积分规则
    hidePointsRules() {
      this.showPointsModal = false;
    },

    // 结算
    checkout() {
      // 检查是否有选中的商品
      if (this.selectedCount === 0) {
        uni.showToast({
          title: "请选择要结算的商品",
          icon: "none",
        });
        return;
      }
      let buy_ids = [];
      let buy_items = [];
      this.cartItems.forEach((item) => {
        if (item.selected) {
          buy_ids.push(item.cart_id);
          buy_items.push(item);
        }
      });
      uni.setStorageSync("buy_items", buy_items);
      // 跳转到结算页面
      uni.navigateTo({
        url: "/pages/checkout/checkout?type=cart&ids=" + buy_ids.join(","),
      });
    },
  },
};
</script>

<style>
.cart-container {
  background-color: #f8f6f1;
  /* 米白色背景 */
  min-height: 100vh;
  padding-bottom: 100rpx;
  position: relative;
}

/* 顶部导航栏样式 */
.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  
  /* 进一步增加高度 */
  padding: 10rpx 30rpx 0;
  /* 增加顶部内边距 */
  background-color: #ffffff31;
  position: sticky;
  top: 0;
  z-index: 100;
  box-sizing: border-box;
  /* 确保padding计入总高度 */
}

.nav-left {
  width: 60rpx;
}

.nav-back {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
}

.back-icon {
  width: 40rpx;
  height: 40rpx;
}

.nav-title {
  font-size: 32rpx;
  color: #4d3f33;
  font-family: "汉仪尚巍手书", "思源宋体", sans-serif;
}

.nav-right {
  width: 60rpx;
  display: flex;
  justify-content: flex-end;
}

.nav-edit {
  font-size: 28rpx;
  color: #78a77f;
  /* 青瓷绿 */
  white-space: nowrap;
}

.empty-placeholder {
  width: 60rpx;
}

/* 加载中样式 */
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
  margin-top: 20rpx;
  /* 减少顶部间距 */
}

.loading-spinner {
  width: 70rpx;
  height: 70rpx;
  border: 6rpx solid #f3f3f3;
  border-top: 6rpx solid #78a77f;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 20rpx;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.loading-text {
  font-size: 28rpx;
  color: #a89b88;
}

/* 空购物车提示样式 */
.empty-cart {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
  margin-top: 20rpx;
  /* 减少顶部间距 */
}

.empty-icon {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 30rpx;
}

.empty-text {
  font-size: 28rpx;
  color: #a89b88;
  margin-bottom: 40rpx;
}

.go-shopping-btn {
  width: 300rpx;
  height: 80rpx;
  background-color: #e2c675;
  /* 佛经黄 */
  color: #ffffff;
  font-size: 28rpx;
  border-radius: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 购物车列表样式 */
.cart-list {
  margin-bottom: 100rpx;
}

/* 店铺信息样式 */
.shop-info {
  background-color: #ffffff;
  padding: 20rpx 30rpx;
  margin-top: 20rpx;
}

.shop-select {
  display: flex;
  align-items: center;
}

.select-icon {
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  border: 2rpx solid #a89b88;
  margin-right: 20rpx;
  position: relative;
}

.select-icon.selected {
  border-color: #78a77f;
  /* 青瓷绿 */
  background-color: #78a77f;
}

.select-icon.selected::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20rpx;
  height: 12rpx;
  border-left: 4rpx solid #ffffff;
  border-bottom: 4rpx solid #ffffff;
  transform: translate(-50%, -60%) rotate(-45deg);
}

.shop-icon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 10rpx;
}

.shop-name {
  font-size: 28rpx;
  color: #4d3f33;
}

/* 商品列表样式 */
.cart-items {
  background-color: #ffffff;
}

.cart-item {
  display: flex;
  padding: 30rpx;
  border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
}

.item-select {
  display: flex;
  align-items: center;
  margin-right: 20rpx;
}

.item-image {
  width: 160rpx;
  height: 160rpx;
  border-radius: 8rpx;
  margin-right: 20rpx;
}

.item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.item-name {
  font-size: 28rpx;
  color: #4d3f33;
  margin-bottom: 10rpx;
}

.item-spec {
  font-size: 24rpx;
  color: #a89b88;
  margin-bottom: 20rpx;
}

.item-price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.item-price {
  font-size: 32rpx;
  color: #8b5a2b;
  /* 檀木棕 */
  font-weight: bold;
}

.item-quantity {
  display: flex;
  align-items: center;
}

.quantity-btn {
  width: 50rpx;
  height: 50rpx;
  border: 1rpx solid #eeeae0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  color: #75695c;
  background-color: #ffffff;
}

.quantity-minus {
  border-radius: 4rpx 0 0 4rpx;
}

.quantity-plus {
  border-radius: 0 4rpx 4rpx 0;
}

.quantity-input {
  width: 70rpx;
  height: 50rpx;
  border-top: 1rpx solid #eeeae0;
  border-bottom: 1rpx solid #eeeae0;
  text-align: center;
  font-size: 28rpx;
  color: #4d3f33;
}

/* 优惠信息区域样式 */
.discount-section {
  background-color: #ffffff;
  margin-top: 20rpx;
  padding: 0 30rpx;
}

.discount-title {
  font-size: 28rpx;
  color: #4d3f33;
  padding: 20rpx 0;
  border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
}

.discount-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
}

.discount-label {
  font-size: 28rpx;
  color: #4d3f33;
}

.discount-value {
  display: flex;
  align-items: center;
  font-size: 26rpx;
  color: #a89b88;
}

.discount-active {
  color: #78a77f;
  /* 青瓷绿 */
}

.arrow-icon {
  width: 32rpx;
  height: 32rpx;
  margin-left: 10rpx;
}

.points-available {
  margin-right: 10rpx;
}

.points-switch {
  transform: scale(0.8);
}

.points-info {
  display: flex;
  align-items: center;
  padding: 10rpx 0 20rpx;
  font-size: 24rpx;
  color: #a89b88;
}

.points-info-text {
  flex: 1;
}

.points-detail {
  color: #78a77f;
  /* 青瓷绿 */
  border-bottom: 1rpx solid #78a77f;
  padding-bottom: 2rpx;
}

/* 订单金额信息样式 */
.order-summary {
  background-color: #ffffff;
  margin-top: 20rpx;
  padding: 20rpx 30rpx;
}

.summary-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16rpx;
}

.summary-label {
  font-size: 28rpx;
  color: #4d3f33;
}

.summary-value {
  font-size: 28rpx;
  color: #4d3f33;
}

.summary-divider {
  height: 1rpx;
  background-color: rgba(0, 0, 0, 0.05);
  margin: 20rpx 0;
}

.summary-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.total-label {
  font-size: 28rpx;
  color: #4d3f33;
}

.total-value {
  font-size: 36rpx;
  color: #8b5a2b;
  /* 檀木棕 */
  font-weight: bold;
}

/* 底部结算栏样式 */
.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30rpx;
  border-top: 1rpx solid rgba(0, 0, 0, 0.05);
  z-index: 90;
}

.select-all {
  display: flex;
  align-items: center;
}

.select-text {
  font-size: 28rpx;
  color: #4d3f33;
  margin-left: 10rpx;
}

.cart-total {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-right: 20rpx;
}

.total-price {
  font-size: 28rpx;
  color: #4d3f33;
}

.price-value {
  font-size: 32rpx;
  color: #8b5a2b;
  /* 檀木棕 */
  font-weight: bold;
}

.total-saved {
  font-size: 22rpx;
  color: #e95f5c;
}

.checkout-btn,
.delete-btn {
  width: 200rpx;
  height: 80rpx;
  border-radius: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  color: #ffffff;
}

.checkout-btn {
  background-color: #78a77f;
  /* 青瓷绿 */
}

.delete-btn {
  background-color: #e95f5c;
}

/* 优惠券选择弹窗样式 */
.coupon-modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 999;
}

.coupon-mask {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

.coupon-container {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #ffffff;
  border-radius: 30rpx 30rpx 0 0;
  overflow: hidden;
  height: 70%;
  display: flex;
  flex-direction: column;
}

.coupon-header {
  position: relative;
  padding: 30rpx;
  text-align: center;
  border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
}

.coupon-title {
  font-size: 32rpx;
  color: #4d3f33;
  font-family: "汉仪尚巍手书", "思源宋体", sans-serif;
}

.coupon-close {
  position: absolute;
  top: 30rpx;
  right: 30rpx;
  font-size: 40rpx;
  color: #a89b88;
  line-height: 1;
}

.coupon-list {
  flex: 1;
  padding: 20rpx 30rpx;
}

.coupon-item {
  display: flex;
  margin-bottom: 20rpx;
  border-radius: 16rpx;
  background-color: #fff9e6;
  position: relative;
  overflow: hidden;
}

.coupon-item::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 180rpx;
  width: 20rpx;
  background: radial-gradient(circle at left, transparent 10rpx, #fff9e6 10rpx) repeat-y;
  background-size: 20rpx 20rpx;
  transform: translateX(-50%);
}

.coupon-left {
  width: 180rpx;
  padding: 30rpx 20rpx;
  background-color: #e2c675;
  /* 佛经黄 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.coupon-value {
  font-size: 38rpx;
  color: #ffffff;
  font-weight: bold;
}

.coupon-condition {
  font-size: 20rpx;
  color: rgba(255, 255, 255, 0.8);
  margin-top: 10rpx;
}

.coupon-right {
  flex: 1;
  padding: 20rpx;
}

.coupon-name {
  font-size: 28rpx;
  color: #8b5a2b;
  /* 檀木棕 */
  font-weight: bold;
  margin-bottom: 10rpx;
}

.coupon-time,
.coupon-scope {
  font-size: 22rpx;
  color: #a89b88;
  margin-top: 6rpx;
}

.coupon-select-icon {
  position: absolute;
  top: 10rpx;
  right: 10rpx;
  width: 40rpx;
  height: 40rpx;
}

.coupon-select-icon image {
  width: 100%;
  height: 100%;
}

.coupon-selected {
  border: 2rpx solid #78a77f;
  /* 青瓷绿 */
}

.no-coupon {
  text-align: center;
  padding: 60rpx 0;
  color: #a89b88;
  font-size: 28rpx;
}

.coupon-footer {
  display: flex;
  padding: 20rpx 30rpx 40rpx;
  border-top: 1rpx solid rgba(0, 0, 0, 0.05);
}

.coupon-btn {
  flex: 1;
  height: 80rpx;
  border-radius: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
}

.coupon-cancel {
  margin-right: 20rpx;
  background-color: #eeeae0;
  color: #75695c;
}

.coupon-confirm {
  background-color: #78a77f;
  /* 青瓷绿 */
  color: #ffffff;
}

/* 积分规则弹窗样式 */
.points-modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
}

.points-modal-content {
  width: 600rpx;
  background-color: #ffffff;
  border-radius: 20rpx;
  overflow: hidden;
}

.points-modal-header {
  position: relative;
  padding: 30rpx;
  text-align: center;
  border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
}

.points-modal-title {
  font-size: 32rpx;
  color: #4d3f33;
  font-family: "汉仪尚巍手书", "思源宋体", sans-serif;
}

.points-modal-close {
  position: absolute;
  top: 30rpx;
  right: 30rpx;
  font-size: 40rpx;
  color: #a89b88;
  line-height: 1;
}

.points-modal-body {
  padding: 30rpx;
  max-height: 800rpx;
  overflow-y: auto;
}

.points-rule-item {
  margin-bottom: 30rpx;
}

.points-rule-title {
  font-size: 28rpx;
  color: #4d3f33;
  font-weight: bold;
  margin-bottom: 16rpx;
}

.points-rule-desc {
  display: flex;
  flex-direction: column;
}

.points-rule-desc text {
  font-size: 26rpx;
  color: #75695c;
  line-height: 1.6;
}

.points-modal-footer {
  padding: 20rpx 30rpx 40rpx;
}

.points-modal-btn {
  background-color: #e2c675;
  color: #ffffff;
  height: 80rpx;
  line-height: 80rpx;
  border-radius: 40rpx;
  font-size: 28rpx;
  border: none;
}
</style>
